<template>
	<view>
		<view class="container">
			<view v-for="item in menuData" class="menu-container">
				<navigator :url="`/cookbookPackage/pages/search/search?name=${item.name}`">
					<image :src='item.icon' class="small-img"></image>
					<view>
						<text>{{item.name}}</text>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';

	const menuData = ref([])


	onMounted(() => {
		getMenu();
	})

	function getMenu() {
		uni.request({
			url: "http://nocat.life:3017/navigators",
		}).then((res) => {
			if (res.data.code == 200) {
				menuData.value = res.data.data;
			}
		})
	}
</script>

<style scoped>
	.container {
		margin-bottom: 20rpx;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		row-gap: 30rpx;
		color: #444444;
		font-size: 22rpx;
	}

	.small-img {
		width: 60rpx;
		height: 60rpx;
	}

	.menu-container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>